import React from 'react';
import {connect} from 'react-redux';
import {StyleSheet} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Home from '@/pages/Home';
import {RootState} from '@/models/index';

export type HomeTabParamList = {
  [key: string]: {
    modelNamespace: string;
  };
};

const Tab = createMaterialTopTabNavigator<HomeTabParamList>();

const styles = StyleSheet.create({
  sceneContainer: {
    backgroundColor: 'transparent',
  },
});

const HomeTabs = () => (
  <Tab.Navigator
    lazy
    sceneContainerStyle={styles.sceneContainer}
    tabBarOptions={{
      scrollEnabled: true,
      tabStyle: {
        padding: 0,
        width: 80,
      },
      indicatorStyle: {
        height: 4,
        width: 20,
        marginLeft: 30,
        borderRadius: 2,
        backgroundColor: '#f86442',
      },
      activeTintColor: '#f86442',
      inactiveTintColor: '#333',
    }}>
    <Tab.Screen
      name={'Home'}
      component={Home}
      options={{tabBarLabel: '推荐'}}
    />
  </Tab.Navigator>
);

const mapStateToProps = (state: RootState) => state;

export default connect(mapStateToProps)(HomeTabs);
